<!DOCTYPE html>
<html lang="zh">
<head>
    <title>修改密码</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../frame/asset/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/asset/css/common.css">
    <script src="../asset/lib/jquery321.min.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 导入导航条 -->
    <div class="layui-header">
        <div class="layui-logo">个人信息管理中心</div>

        <ul class="layui-nav layui-layout-right">

            <li class="layui-nav-item">
                欢迎光临:&nbsp;&nbsp;<span id="span-nickname"></span>
            </li>
            <li class="layui-nav-item"><a onclick="logout()">注销</a></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item">
                    <a href="userinfo.html">个人信息</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="useredit.html">修改信息</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="pwdedit.html">修改密码</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- END：导航条 -->
    <div class="layui-body layui-bg-gray">
        <!-- ===================================在这里编写HTML代码================================== -->
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-card" pad15>
                    <div class="layui-card-header">个人中心</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="">
                            <div class="layui-form-item layui-col-md4">
                                <label class="layui-form-label">旧密码</label>
                                <div class="layui-input-block">
                                    <input type="password" id="oldPwd-input" name="oldPwd"
                                           lay-verify="pass" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-md4">
                                <label class="layui-form-label">新密码</label>
                                <div class="layui-input-block">
                                    <input type="password" id="newPwd-input" name="newPwd"
                                           lay-verify="pass" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-md4">
                                <label class="layui-form-label">再次输入新密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="newPwdTwo"
                                           lay-verify="pass|rePass" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="pwdEditSubmit">提交修改</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- ================================END：在这里编写HTML代码================================ -->
    </div>
</div>
<!-- 导入代码库文件 -->
<script src="../frame/asset/lib/layui/layui.js"></script>
<script src="../frame/asset/js/layui-elem.js"></script>
<script src="../frame/asset/js/core.js"></script>
<!-- END：代码库文件 -->
<!-- ================================在这里编写页面的js代码================================ -->
<script>
    //检查登录
    util.checkLogin();
    //读取用户信息
    var userInfo = util.data.get("userInfo");
    $('#span-nickname').text(userInfo.nickname);

    layui.use('form', function () {
        var form = layui.form;

        /**
         * 验证部分数据正确性
         **/
        form.verify({
            "pass": [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ],
            "rePass": function (value, item) { //value：表单的值、item：表单的DOM对象
                var pwd = $("#newPwd-input").val();
                if (value !== pwd) {
                    return "两次输入的密码不一致";
                }
            },
        });

        //监听提交
        form.on('submit(pwdEditSubmit)', function (data) {

            var user = {
                "username": userInfo.username,
                "oldPwd": data.field.oldPwd,
                "newPwd": data.field.newPwd
            };
            // 保存更新
            layer.msg("正在提交", {
                icon: 16,
                time: 10000
            })
            util.httpRequest.post("../user/pwd/change", user, function (msg) {
                layer.closeAll();
                if (msg.code === 200) {
                    layer.msg('修改成功', {
                        offset: '50px'
                        , icon: 1
                        , time: 1000
                    });
                    setTimeout(function () {
                        window.location.href = "userinfo.html";
                    }, 1000);
                } else {
                    layer.msg(msg.errorMessage, {
                        offset: '50px'
                        , icon: 2
                        , time: 2000
                    });
                }
            });
            return false;
        });
    });

    //注销登录
    function logout() {
        util.data.remove("userInfo");
        util.httpRequest.get("../logout", {}, function (msg) {
            if (msg.code === 200) {
                layer.msg('注销成功', {
                    offset: '50px'
                    , icon: 1
                    , time: 1000
                });
                //把登录用户数据保存到浏览器
                setTimeout(function () {
                    window.location.href = "login.html";
                }, 1000)
            } else {
                layer.msg(msg.errorMessage, {
                    offset: '50px'
                    , icon: 2
                    , time: 2000
                });
            }
        });
    }
</script>
<!-- ================================END:在这里编写页面的js代码================================ -->
</body>
</html>
